<!--
 * @Author: 李兵 964368540@qq.com
 * @Date: 2024-05-25 10:14:53
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-01-03 18:11:18
 * @FilePath: \crm\pages\form\contacts-form.vue
 * @Description: 新增 联系人  form
-->
<template>
  <view class="form-wrap">
    <uni-forms
      ref="baseForm"
      :modelValue="formData"
      :rules="rules"
      label-position="left"
      label-width="100px"
    >
      <view class="forms-item-wrap">
        <uni-forms-item label="姓名" name="name" :required="true">
          <input
            type="text"
            trim="all"
            v-model="formData.name"
            placeholder="请输入联系人"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="手机号" name="phone" :required="true">
          <input
            type="number"
            trim="all"
            :maxlength="11"
            v-model="formData.phone"
            placeholder="请输入手机号"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" :required="true">
          <SelectPicker :range="SEX_TYPE_ARRAY" v-model="formData.sex">
            <view
              :class="[
                formData.sex !== null ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
                formData.sex !== null
                  ? SEX_TYPE_MAP[formData.sex]
                  : "请选择性别"
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
        <uni-forms-item label="所在地" name="area" :required="true">
          <ChinaArea @input="inputHandle" />
        </uni-forms-item>
        <uni-forms-item label="生日" name="birthday">
          <uni-datetime-picker
            type="date"
            :clear-icon="false"
            v-model="formData.birthday"
            placeholder="请选择生日"
            :border="false"
			 placeholder-class="placeholder_class"
          >
		   <view
		     :class="[
		       formData.birthday ? 'uni-input-input' : 'select-wrap',
		     ]"
		     >{{
		       formData.birthday
		         ? formData.birthday
		         : "请选择生日"
		     }}</view
		   >
		  
		  </uni-datetime-picker>
        </uni-forms-item>
        <uni-forms-item label="微信" name="wx" :required="true">
          <input
            type="text"
            trim="all"
            v-model="formData.wx"
            placeholder="请输入微信"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="QQ" name="qq">
          <input
            type="text"
            trim="all"
            v-model="formData.qq"
            placeholder="请输入QQ"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="是否主账号" name="status" >
          <SelectPicker :range="status" v-model="formData.status">
            <view
              :class="[
                formData.status !== null ? 'uni-input-input' : 'select-wrap',
              ]"
              >{{
              formData.status == 0 ? '是' : formData.status == 1 ? '否' : '是否主账号'
                
              }}</view
            >
          </SelectPicker>
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="mailbox">
          <input
            type="text"
            trim="all"
            v-model="formData.mailbox"
            placeholder="请输入邮箱"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>
        <uni-forms-item label="备注" name="remarks">
          <input
            type="textarea"
            trim="all"
            v-model="formData.remarks"
            placeholder="请输入备注"
            :inputBorder="false"
            placeholder-class="placeholder_class"
          />
        </uni-forms-item>

      </view>
      <!-- <view class="forms-item-wrap">
        <uni-forms-item label="备注" name="remarks">
          <uni-easyinput
            type="textarea"
            trim="all"
            v-model="formData.remarks"
            placeholder="请输入备注"
            :inputBorder="false"
            placeholderStyle="color:#C1C5C9;fontSize:16px"
          />
        </uni-forms-item>
      </view> -->
    </uni-forms>
    <bottombox>
      <u-button
        type="error"
        text="保存"
        @click="onSumbit"
        :loading="loading"
        :disabled="loading"
      ></u-button>
    </bottombox>
  </view>
</template>
<script>
import { addCompanyStaff } from "@/apis/customer/index";
import ChinaArea from "@/pagesform/china-area/china-area";
import SelectPicker from "@/components/select-picker/select-picker";
import { SEX_TYPE_ARRAY, SEX_TYPE_MAP } from "@/contacts/calendar";
export default {
  name: "contacts-form",
  components: {
    ChinaArea,
    SelectPicker,
  },
  onLoad(data) {
    this.customId = data.id;
  },
  data() {
    return {
      status: [
        { label: "是", value: 0 },
        { label: "否", value: 1 },
      ],
      customId: "",
      SEX_TYPE_ARRAY,
      SEX_TYPE_MAP,
      loading: false,
      formData: {
        name: null,
        phone: null,
        sex: null,
        status: 0
      },
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: "请输入姓名",
            },
          ],
        },
        phone: {
          rules: [
            {
              required: true,
              errorMessage: "请输入手机号",
            },
            {
              minLength: 11,
              maxLength: 11,
              errorMessage: "请输入正确的手机号"
            },
          ],
        },
        sex: {
          rules: [
            {
              required: true,
              errorMessage: "请选择性别",
            },
          ],
        },
        wx: {
          rules: [
            {
              required: true,
              errorMessage: "请输入微信",
            },
          ],
        },
      },
    };
  },
  methods: {
    inputHandle(val, name) {
      this.formData.area = val;
      this.formData.provinceCode = val ? val[0] : null;
      this.formData.cityCode = val ? val[1] : null;
      this.formData.regionCode = val ? val[2] : null;
      this.formData.province = name ? name[0] : null;
      this.formData.city = name ? name[1] : null;
      this.formData.region = name ? name[2] : null;
    },
    async onSumbit() {
      const valid = await this.$refs.baseForm.validate();
      if (valid) {
        try {
          this.loading = true;
          const body = {
            customId: this.customId,
            ...this.formData,
            status: 1,
          };
          delete body.area;
          await addCompanyStaff(body);
          this.loading = false;
          uni.navigateBack({
            delta: 1, // 返回的页面数
          });
        } catch (error) {
          this.loading = false;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #f2f4f5;
}
</style>

